<template>
  <div class="app">
    <div class="header">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        router
      >
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item index="/film">电影</el-menu-item>
        <el-menu-item index="/cinema">影院</el-menu-item>
        <el-menu-item index="/show">演出</el-menu-item>
        <el-menu-item index="/list">榜单</el-menu-item>
        <el-menu-item index="/hotspot">热点</el-menu-item>
        <el-menu-item index="/shopping">商城</el-menu-item>
        <div class="pos">
          <label for="">定位城市:</label>
          <el-cascader
            :options="options"
            :show-all-levels="false"
          ></el-cascader>
        </div>
        <el-dropdown
          placement="bottom"
          size="small"
        >
          <span class="el-dropdown-link">
            <i class="phone"></i>
            APP下载
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <div class="app">
                <img
                  src="../public/home/app.png"
                  alt=""
                >
                <p>扫码下载APP</p>
                <p>选座更优惠</p>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-input
          v-model="searchInput"
          placeholder="找电视剧、影人、影院"
          suffix-icon="el-icon-search"
        ></el-input>
        <el-avatar icon="el-icon-user-solid"></el-avatar>
      </el-menu>
    </div>
    <router-view class="view"></router-view>
    <div class="footer">
      <p>
        关于猫眼:
        <a
          href=""
          target="_blank"
        >
          关于我们</a>
        <span></span>
        <a
          href=""
          target="_blank"
        >
          管理团队</a>
        <span></span>
        <a
          href=""
          target="_blank"
        >
          投资者关系
        </a>
        &nbsp;&nbsp;&nbsp;&nbsp;
        友情链接:
        <a
          href=""
          target="_blank"
        >
          美团网
        </a>
        <span></span>
        <a
          href=""
          target="_blank"
        >
          格瓦拉
        </a>
        <span></span>
        <a
          href=""
          target="_blank"
        >
          美团下载
        </a>
        <span></span>
        <a
          href=""
          target="_blank"
        >
          欢喜首映
        </a>
      </p>
      <p>商务合作邮箱：v@maoyan.com 客服电话：10105335 违法和不良信息举报电话：4006018900</p>
      <p>用户投诉邮箱：tousujubao@meituan.com 舞弊线索举报邮箱：wubijubao@maoyan.com</p>
      <p class="normal_color">
        <a
          href=""
          target="_blank"
        >
          中华人民共和国增值电信业务经营许可证 京B2-20190350
        </a>
        <span></span>
        <a
          href=""
          target="_blank"
        >
          营业性演出许可证 京演（机构）（2019）4094号
        </a>
      </p>
      <p class="normal_color">
        <a
          href=""
          target="_blank"
        >
          广播电视节目制作经营许可证 （京）字第08478号
        </a>
        <span></span>
        <a
          href=""
          target="_blank"
        >
          网络文化经营许可证 京网文（2019）3837-369号
        </a>
      </p>
      <p class="normal_color">
        <a
          href=""
          target="_blank"
        >
          猫眼用户服务协议
        </a>
        <span></span>
        <a
          href=""
          target="_blank"
        >
          猫眼平台交易规则总则
        </a>
        <span></span>
        <a
          href=""
          target="_blank"
        >
          隐私政策
        </a>
      </p>
      <p class="normal_color">
        <a
          href=""
          target="_blank"
        >
          京公网安备 11010102003232号
        </a>
        <span></span>
        <a
          href=""
          target="_blank"
        >
          京ICP备16022489号
        </a>
      </p>
      <p>
        北京猫眼文化传媒有限公司
      </p>
      <p>
        ©2020 猫眼电影 maoyan.com
      </p>
      <p class="footer_pic">
        <a href="">
          <img
            src="../public/home/footer_1.png"
            alt=""
          >
        </a>
        <a href="">
          <img
            src="../public/home/footer_2.png"
            alt=""
          >
        </a>
        <a href="">
          <img
            src="../public/home/footer_3.png"
            alt=""
          >
        </a>
      </p>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    activeIndex: '1',
    searchInput: '',
    options: [
      {
        value: 'A',
        label: 'A',
        children: [
          {
          value: 'alashanmeng',
          label: '阿拉善盟',
          }, 
          {
            value: 'anshan',
            label: '鞍山',
          },
          {
            value: 'anqing',
            label: '安庆',
          },
        ]
      }, 
      {
        value: 'B',
        label: 'B',
        children: [
          {
          value: 'beijing',
          label: '北京',
          }, 
          {
            value: 'baoding',
            label: '保定',
          }
        ]
      }, 
      {
        value: 'C',
        label: 'C',
        children: [
          {
          value: 'chongqing',
          label: '重庆',
          }, 
          {
            value: 'chengdu',
            label: '成都',
          }
        ]
      }
    ]
  }),
  created() {},
  methods: {}
}
</script>
<style lang="less" scoped>
.app {
  .header {
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    min-width: 1200px;
    background-color: #fff;
    border-bottom: 1px solid #909399;
    .el-menu-demo {
      position: relative;
      width: 490px;
      margin: 0 auto;
      height: 80px;
      padding-left: 300px;
      padding-right: 410px;
      background: url(../public/home/logo.png) no-repeat 0;
      border: none;
      .el-menu-item {
        height: 80px;
        line-height: 80px;
      }
      .pos {
        color: #909399;
        position: absolute;
        top: 20px;
        left: 140px;
        .el-cascader {
          width: 100px;
        }
      }
      .el-dropdown {
        position: absolute;
        top: 30px;
        right: 320px;
        .el-dropdown-link {
          cursor: pointer;
          color: #909399;
          .phone {
            float: left;
            width: 15px;
            height: 24px;
            margin-right: 5px;
            background: url(../public/home/phone.png) no-repeat;
          }
        }
        .el-icon-arrow-down {
          font-size: 12px;
        }
      }
      .el-input {
        position: absolute;
        width: 200px;
        height: 40px;
        border-radius: 10px;
        right: 100px;
        top: 20px;
      }
      .el-avatar--icon {
        position: absolute;
        right: 40px;
        top: 20px;
      }
    }
    
    .el-scrollbar__view,.el-cascader-node {
      width: 100px;
    }
    .el-dropdown-menu__item {
      line-height: normal;
      font-size: 14px;
      .app {
        width: 130px;
        height: 165px;
        border: 1px solid #dcd4d7;
        border-top: 0;
        img {
          width: 82px;
          height: 82px;
        }
      }
    }
  }
  .footer {
    width: 100%;
    background-color: #262426;
    padding: 56px 0;
    margin: 0 auto;
    min-width: 1200px;
    margin-top: 82px;
    visibility: visible;
    p {
      text-align: center;
      font-size: 14px;
      line-height: 22px;
      height: 22px;
      color: #ccc;
      margin: 0;
      padding: 0;
      a {
        color: #ef4238;
        text-decoration: none;
      }
      a:hover {
        text-decoration:underline
      }
      span {
        display: inline-block;
        border-left: 1px solid #ccc;
        margin: 0 7px;
        height: 12px;
        position: relative;
        top: 1px;
      }
    }
    .normal_color {
      a {
        color: #ccc;
      }
    }
    .footer_pic {
      margin: 20px auto;
      a {
        padding-right: 12px;
      }
    }
  }
}
</style>
